<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户列表</title>
        <script src="js/jquery-3.3.1.js"></script>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }

            th, td {
                padding: 5px;
                text-align: left;
            }

            li {
                float: left;
                padding: 6px;
                list-style: none;
            }
        </style>
        <script>

            //一 删除~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            //全选
            function cekAll(obj) {
                var $inputs = $("input[name='id']");

                for (let i = 0; i < $inputs.length; i++) {
                    $inputs[i].checked = obj.checked;
                }

            }

            //删除单个
            function singleDel(id) {
                if (confirm("是否删除?")) {
                    delPost(id);
                }
            }

            //删除选中
            function cekDel() {
                var $inputs = $("input[name='id']");
                var $ids = new Array();
                for (let i = 0; i < $inputs.length; i++) {
                    if ($inputs[i].checked) {
                        $ids.push($($inputs[i]).val());
                    }
                }

                if ($ids.length > 0) {
                    if (confirm("是否删除")) {
                        delPost($ids);
                    }
                } else {
                    alert("请先选择删除选项");
                }

            }

            //删除 请求方法
            function delPost(ids) {
                $.post("user/delUser", {'ids[]': ids}, function (info) {
                    if (info.flag) {
                        location.href = "user_list.html";
                    }
                })
            }


            //二 查询~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            //条件查询
            function conditionQuery() {
                let username = $("#username").val();
                let email = $("#email").val();
                let sex = $("#sex").val();

                getPage(null, null, username, email, sex);
            }

            //自动查询当前页数据
            $(function () {
                getPage(null, null, null, null, null);
            })

            //分页查询 请求方法
            function getPage(currentPage, row, username, email, sex) {
                $.get("user/queryPage", {currentPage: currentPage, row: row, username: username, email: email, sex: sex}, function (info) {
                    if (info.flag) {
                        let page = info.data;
                        let userList = page.list;


                        //一 渲染_当前页
                        var tr = '       <tr>\n' +
                            '                <th><input type="checkbox" onclick="cekAll(this)"></th>\n' +
                            '                <th>编号</th>\n' +
                            '                <th>用户名</th>\n' +
                            '                <th>密码</th>\n' +
                            '                <th>邮箱</th>\n' +
                            '                <th>性别</th>\n' +
                            '                <th>爱好</th>\n' +
                            '                <th>操作</th>\n' +
                            '            </tr>';



                        for (let i = 0; i < userList.length; i++) {
                            var user = userList[i];
                            var loveStr = '';
                            let loves = user.love;
                            for (let j = 0; j < loves.length; j++) {
                                var loveName = loves[j].name;
                                loveStr+=loveName;
                                loveStr += ",";
                            }

                            tr += '            <tr>\n' +
                                '                <th><input type="checkbox" name="id" value="'+ user.id +'"></th>\n' +
                            '                <td>'+ user.id +'</td>\n' +
                            '                <td>'+ user.username+'</td>\n' +
                            '                <td>'+ user.password +'</td>\n' +
                            '                <td>'+ user.email +'</td>\n' +
                            '                <td>'+ user.sex +'</td>\n' +
                            '                <td>'+ loveStr +'</td>\n' +
                            '                <td><input type="button" value="修改" onclick="upUser('+  user.id +')"><input type="button" value="删除" onclick="singleDel('+ user.id +')"></td>\n' +
                            '            </tr>';
                        }

                        $("#tableList").html(tr);




                        //二 渲染_页码
                        var li = '';
                        li += '<li><a href="javascript: getPage('+1+','+5 +',\''+ username +'\',\''+ email +'\',\''+ sex +'\')">首页</a></li>';

                        var beforeNum = page.currentPage -1;
                        if(beforeNum <= 0){
                            li += '<li><a href="#">上一页</a></li>';
                        }else{
                            li += '<li><a href="javascript: getPage('+beforeNum+','+5 +',\''+ username +'\',\''+ email +'\',\''+ sex +'\')">上一页</a></li>';
                        }



                        var start = 0;
                        var end = 0 ;
                        if(page.totalPage  <= 5){
                             start = 1;
                             end = page.totalPage ;
                        }else {
                            start = page.currentPage - 2;
                            end =  page.currentPage + 2;

                            if(page.currentPage <= 2){
                                start = 1;
                                end = start + 4;
                            }
                            if(page.currentPage >= page.totalPage -1){
                                start = page.totalPage - 4;
                                end = page.totalPage;
                            }

                        }





                        for (let i = start; i <=end; i++) {
                            li += '<li><a href="javascript: getPage('+i+','+5 +',\''+ username +'\',\''+ email +'\',\''+ sex +'\')">'+ i +'</a></li>';
                        }






                        var nextNum = page.currentPage + 1;
                        if(nextNum > page.totalPage){
                            li += '<li><a href="#">下一页</a></li>';
                        }else {
                            li += '<li><a href="javascript: getPage('+nextNum+','+5 +',\''+ username +'\',\''+ email +'\',\''+ sex +'\')">下一页</a></li>';
                        }

                        li += '<li><a href="javascript: getPage('+page.totalPage+','+5 +',\''+ username +'\',\''+ email +'\',\''+ sex +'\')">末页</a></li>';

                        $("#pageUl").html(li);


                        $("#totalPage").text(page.totalPage);
                        $("#totalCount").text(page.totalCount);

                    }
                })
            }



            //三 修改 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            function upUser(id) {
                location.href = "updateuser.html?id=" + id;
            }

        </script>
    </head>
    <body>
        <h3>用户列表</h3>
        <form>
            用户名:<input type="text" name="username" id="username">
            邮箱:<input type="text" name="email" id="email">
            性别:<input type="text" name="sex" id="sex">
            <input type="button" value="查询" onclick="conditionQuery()"><br/><br/><br/>
        </form>

        <div>
            <a href="index.html"><input type="button" value="首页"></a>
            <a href="adduser.html"><input type="button" value="添加用户"></a>
            <input type="button" value="删除选中" onclick="cekDel()"><br/>
        </div>

        <table id="tableList">
            <tr>
                <th><input type="checkbox" onclick="cekAll(this)"></th>
                <th>编号</th>
                <th>用户名</th>
                <th>密码</th>
                <th>邮箱</th>
                <th>性别</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
            <tr>
                <th><input type="checkbox" name="id" value="1"></th>
                <td>1</td>
                <td>喜羊羊</td>
                <td>123</td>
                <td>xiyangyang@qq.com</td>
                <td>男</td>
                <td>篮球,羽毛球</td>
                <td><input type="button" value="修改" onclick="upUser(1)"><input type="button" value="删除" onclick="singleDel(1)"></td>
            </tr>
            <tr>
                <th><input type="checkbox" name="id" value="2"></th>
                <td>2</td>
                <td>懒羊羊</td>
                <td>123</td>
                <td>lanyangyang@qq.com</td>
                <td>男</td>
                <td>篮球,羽毛球</td>
                <td><input type="button" value="修改" onclick="upUser(2)"><input type="button" value="删除" onclick="singleDel(2)"></td>
            </tr>
            <tr>
                <th><input type="checkbox" name="id" value="3"></th>
                <td>3</td>
                <td>美羊羊</td>
                <td>123</td>
                <td>meiyangyang@qq.com</td>
                <td>女</td>
                <td>篮球,羽毛球,乒乓球</td>
                <td><input type="button" value="修改" onclick="upUser(3)"><input type="button" value="删除" onclick="singleDel(3)"></td>
            </tr>
        </table>
        <br>


        <!-- 页码~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div>共<span id="totalPage"></span>页 <span id="totalCount"></span>条</div>
        <ul id="pageUl">
            <li><a href="">首页</a></li>
            <li><a href="">上一页</a></li>

            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>

            <li><a href="">下一页</a></li>
            <li><a href="">首页</a></li>
        </ul>


    </body>
</html>
